<script setup lang="ts">
import { ref, watch, onMounted, nextTick } from 'vue';
import Select from "./select.vue"
import Upload from "./upload.vue"
import { BaseInfo } from '@@/apis/resources/types';
import { useThreeJs } from '@@/composables/useThreeJs';
import { isEmpty } from "xe-utils"
import { cloneDeep } from 'lodash';

interface Props {
  accept: string
  id: string | undefined
  path: string | undefined
  threeThumbPath?: string
  entityName: string | undefined
  uploadType: "three-model" | "milstd"
}
const props = defineProps<Props>()
const emit = defineEmits(["update:selectedId", "update:path"])

const selected = ref<BaseInfo>({
  id: "",
  name: "",
  code: "",
  path: "",
  threeThumbPath: ""
})
const dialogVisible = ref<boolean>(false)
const uploadVisible = ref<boolean>(false)
const three3DRef = ref<HTMLDivElement | null>()
const three3DModel = ref<ReturnType<typeof useThreeJs> | null>(null)  // 修改类型定义
const modelInitialized = ref(false)  // 添加初始化标志
const initThreeJs = async () => {
  nextTick(() => {
    if (!three3DModel.value) {
      three3DModel.value = useThreeJs(three3DRef, props.path)
      modelInitialized.value = true
    }
  })
}
const showUpload = () => {
  uploadVisible.value = true
}
const showPane = () => {
  dialogVisible.value = true
}
const handleCloseDialog = (item: BaseInfo | undefined) => {
  dialogVisible.value = false
  if (item != undefined) {
    selected.value.threeThumbPath = item.thumb
    selected.value = cloneDeep(item)
    emit("update:selectedId", item.id)
    emit("update:path", item.path)
  }
}
const handleCloseUpload = (item: BaseInfo | undefined) => {
  uploadVisible.value = false
  if (item != undefined) {
    selected.value = item
    emit("update:selectedId", item.id)
    emit("update:path", item.path)
  }
}

// 监听 path 的变化
watch(
  () => props.path,
  async (newPath) => {
    if (newPath !== undefined) {
      selected.value.path = newPath
      await nextTick()
      if (!modelInitialized.value) {
        await initThreeJs()
      }
      three3DModel.value?.updateModelUrl(newPath)
    }
  },
  { immediate: true }
)
// 监听 threeThumbPath 的变化
watch(
  () => props.threeThumbPath,
  async (newPath) => {
    if (newPath !== undefined) {
      selected.value.threeThumbPath = newPath
      await nextTick()
    }
  },
  { immediate: true }
)


// 监听 id 的变化
watch(
  () => props.id,
  (newId) => {
    if (newId !== undefined) {
      selected.value.id = newId
    }
  }
)

onMounted(async () => {
  await initThreeJs()
  if (props.path) {
    three3DModel.value?.updateModelUrl(props.path)
  }
})
</script>

<template>
  <div>
    <el-space alignment="start">
      <el-button type="primary" @click="showPane">获取</el-button>
      <el-button plain @click="showUpload">本地上传</el-button>
    </el-space>
    <el-row>
      <div v-if="uploadType == 'milstd'" class="show-content">
        <img v-if="!isEmpty(selected.path)" :src="`/model-api${selected.path}`" class="avatar" />
        <div v-else-if="!isEmpty(selected.path)" ref="three3DRef" class="avatar">
        </div>
      </div>
      <div v-else-if="uploadType == 'three-model'" class="show-content">
        <img v-if="!isEmpty(selected.thumb) || !isEmpty(selected.threeThumbPath)" :src="`/model-api${selected.thumb ? selected.thumb : selected.threeThumbPath}`" class="avatar" />
      </div>
    </el-row>
    <Select :selected="selected" :type="uploadType" :visible="dialogVisible" @close-dialog="handleCloseDialog" />
    <Upload :type="uploadType" :isDetail="true" :visible="uploadVisible" :accept="accept" :detail-name="entityName" @close-dialog="handleCloseUpload" />
  </div>
</template>
<style lang="scss" scoped>
.show-content {
  width: 200px;
  height: 134px;
  background: rgba(41,56,96,0.8);
  border-radius: 4px 4px 4px 4px;
  border: 1px solid rgba(255,255,255,0.1);
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

  .avatar {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px 4px 4px 4px;
    background-color: rgba(238, 238, 238,0.1) !important;
  }
}

</style>